<template>
    <div>
        <van-nav-bar title="搜索" left-text="返回" left-arrow @click-left="() => { $router.push('/') }" />
        <van-search v-model="status" shape="round" placeholder="请输入搜索关键词" />


        <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
            description="空空如也" v-show="kongstatus" />

        <div>
            <van-cell-group v-for="item in qsearchApiData">
                <router-link :to="'/detail/' + item.goods_id">
                    <van-cell :title="item.goods_name" />
                </router-link>
            </van-cell-group>
        </div>

        <div v-show="hisstatus">
            <div class="his">
                <h4>热门搜索</h4>
                <van-tag type="primary">标签</van-tag>
                <van-tag type="primary">标签</van-tag>
                <van-tag type="primary">标签</van-tag>
                <van-tag type="primary">标签</van-tag>
            </div>
            <div class="hot">
                <h4>历史搜索</h4>
                <van-tag type="primary">标签</van-tag>
                <van-tag type="primary">标签</van-tag>
                <van-tag type="primary">标签</van-tag>
                <van-tag type="primary">标签</van-tag>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { qsearchApi } from '@/api/api'
import _ from 'lodash'
let status = ref('')
let kongstatus = ref(false)
let hisstatus = ref(true)
let qsearchApiData = ref([])
watch(status, _.debounce((val => {
    console.log(val.length);
    if (val.length == 0) {
        hisstatus.value = true
        kongstatus.value = false
    }
    else {
        hisstatus.value = false
        qsearchApi(val).then((res => {
            console.log('搜索', res);
            qsearchApiData.value = res.data.message
            if (res.data.message.length == 0) {
                kongstatus.value = true
            }
            else {
                kongstatus.value = false
            }
        }))
    }
})))
</script>

<style lang="scss" scoped></style>